<template>
  <div>
    <van-nav-bar left-text="返回" left-arrow @click-left="onClickLeft" class="navBar" />

    <van-cell-group>
      <van-cell title="以哪栋楼为主" size="large" is-link arrow-direction="down" :label="buildingLabel"
        @click="buildingShow=true" />
      <van-cell title="以哪个部位为主" size="large" is-link arrow-direction="down" :label="partLabel" @click="partShow=true" />
    </van-cell-group>

    <multiSelect :show.sync='buildingShow' :data.sync='buildingList' />
    <multiSelect :show.sync='partShow' :data.sync='partList' />
  </div>
</template>

<script>
  import multiSelect from '@/components/multiSelect.vue'
  export default {
    components: {
      multiSelect
    },
    computed: {
      buildingLabel() {
        return this.buildingList.reduce((str, item) => {
          if (item.select) {
            str += item.title + '、'
          }
          return str
        }, "").replace(/、$/g, '') || '暂无'
      },
      partLabel() {
        return this.partList.reduce((str, item) => {
          if (item.select) {
            str += item.title + '、'
          }
          return str
        }, "").replace(/、$/g, '') || '暂无'
      }
    },
    data() {
      return {
        buildingList: [{
          title: '急诊科（门诊大楼）',
          select: true,
        }, {
          title: '外科一号楼（W）',
          select: false,
        }, {
          title: '外科二号楼（F）',
          select: false,
        }, {
          title: '内科一号楼',
          select: false,
        }, {
          title: '内科二号教学楼（J）',
          select: false,
        }, {
          title: '保健楼',
          select: true,
        }, {
          title: '骨科',
          select: false,
        }],

        partList: [{
          title: '心脏',
          select: false,
        }, {
          title: '心包',
          select: true,
        }, {
          title: '胸水',
          select: true,
        }, {
          title: '腹水',
          select: false,
        }, {
          title: '下肢深静脉',
          select: false,
        }],


        buildingShow: false,
        partShow: false
      }

    },
    mounted() {},
    methods: {
      onClickLeft() {
        this.$router.back()
      }
    }
  }
</script>

<style lang='less' scoped>

  .navBar {
    margin-bottom: 48px;
  }
</style>